{extend name="public/base" /} {block name="body"}
<div class="ibox float-e-margins">
	<div class="content-tabs">
		<ol class="breadcrumb">
			<li>
				<a href="{:url('index/index')}"><i class="fa fa-home"></i></a>
			</li>
			<li><strong>订单统计</strong></li>
		</ol>
	</div>
	<div class="ibox-content">
		<form id="myForm" class="form-horizontal m-t" method="post" action="{:url('index')}">
			<div class="order-info panel panel-default">
				<div class="panel-heading">
					<strong><i class="fa fa-bar-chart" style="color:#f70;"></i>&nbsp;&nbsp;订单数统计</strong>&nbsp;&nbsp;
				</div>
				<div class="panel-body clearfix">
					<div class="info-group">
						<span class="h4">
							{$todaysum}
						</span>
						<span class="info-description">今日订单数</span>
					</div>
					<div class="info-group">
						<span class="h4">
							{$weeksum}
						</span>
						<span class="info-description">7天订单数</span>
					</div>
					<div class="info-group">
						<span class="h4">
							{$monthsum}
						</span>
						<span class="info-description">本月订单数</span>
					</div>
					<div class="info-group">
						<span class="h4">
							{$sum}
						</span>
						<span class="info-description">总计订单数</span>
					</div>
				</div>
			</div>
			<!--统计图-->
			<div id="main" style="width: 100%;height:400px;"></div>
		</form>
	</div>
</div>
{/block} {block name="script"}
<script src="__JS__/jquery.form.js"></script>
<script src="__LIB__/validate/jquery.validate.min.js"></script>
<script src="__LIB__/validate/messages_zh.min.js"></script>
<script src="__LIB__/validate/add_validate.min.js"></script>
<script src="__LIB__/fileinput/js/fileinput.min.js"></script>
<script src="__LIB__/fileinput/js/locales/zh.js"></script>
<script src="__JS__/echarts.common.min.js"></script>
<style>
	.order-info .info-group {
		width: 25%;
		text-align: center;
		float: left;
	}
	
	.order-info .info-group+.info-group {
		border-left: 1px dotted #ccc;
	}
	
	.h4 {
		font-size: 22px;
		display: block;
	}
</style>

<script>
	var myChart = echarts.init(document.getElementById('main'));

	var num = [];
	var num1 = [];
	var num2 = [];
	var arr = <?php echo json_encode($xiadan);?>;
	var arr1 = <?php echo json_encode($fukuan);?>;
	var arr2 = <?php echo json_encode($fahuo);?>;
	for(var i = 0; i <= arr.length; i++) {
		num[i] = arr[i];
	}
	for(var i = 0; i <= arr1.length; i++) {
		num1[i] = arr1[i];
	}
	for(var i = 0; i <= arr2.length; i++) {
		num2[i] = arr2[i];
	}

	function getBeforeDate(n) {
		var n = n;
		var d = new Date();

		var mon = d.getMonth() + 1;
		var day = d.getDate();
		if(day <= n) {
			if(mon > 1) {
				mon = mon - 1;
			} else {
				mon = 12;
			}
		}
		d.setDate(d.getDate() - n);

		mon = d.getMonth() + 1;
		day = d.getDate();
		s = (mon < 10 ? (mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
		return s;
	}

	option = {
		title: {
			text: '订单统计'
		},
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data: ['下单笔数', '付款订单', '发货订单']
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},

		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: [getBeforeDate(6), getBeforeDate(5), getBeforeDate(4), getBeforeDate(3), getBeforeDate(2), getBeforeDate(1), getBeforeDate(0)]
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			name: '下单笔数',
			type: 'line',
			stack: '总量',
			data: [num[6], num[5], num[4], num[3], num[2], num[1], num[0]]
		}, {
			name: '付款订单',
			type: 'line',
			stack: '总量',
			data: [num1[6], num1[5], num1[4], num1[3], num1[2], num1[1], num1[0]]
		}, {
			name: '发货订单',
			type: 'line',
			stack: '总量',

		}]
	};

	myChart.setOption(option);
</script>
{/block}